<template>
  <div>
    <div>
      <TopHeader></TopHeader>
      <div style="display: flex" class="container">
        <aside-nav v-show="showAside"></aside-nav>
        <div style="width: 100%">
          <router-view style="flex: 1"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import TopHeader from "@/components/TopHeader.vue";
  import AsideNav from "@/components/AsideNav.vue";
  import {
    ref,
  } from "vue";
  let showAside = false;
  let url = ref(window.location.pathname);

  function geturl() {
    return url;
  }

  function showsAside() {
    url.value = geturl().value;
    console.log(url.value);
    if (url.value === "/index" || url.value === "/blog" || url.value === '/search' || url.value === '/' || url.value ===
      '/adminIndex' || url.value === '/adminSeeBlog') {
      showAside = false;
    } else {
      showAside = true;
    }
  }

  showsAside();


  export default {
    data() {
      return {
        showAside,
      };
    },
    name: "AppLayout",
    components: {
      TopHeader,
      AsideNav,
    },
  };
</script>

<style scoped>
  .container {
    height: 100%;
  }

  #app {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>